<template>
  <div>
    <!-- <router-link to="/demo/componentview">全局匹配</router-link> -->
    <el-container>
      <el-scrollbar height="100vh" style="flex-shrink: 0" ref="scrollRef" always @scroll="scrollBarScroll">
        <el-aside width="260px" class="component_tree">
          <div class="merak2_help">{{ demoProp.title }} 系统文档</div>
          <div><el-button type="success" @click="pullCode">拉代码</el-button> </div>
          <div class="component_group" v-for="(itemGroup, index) in demoMenuList" :key="index">
            <div class="title">{{ itemGroup.title }}</div>
            <div class="list">
              <div class="item_component" v-for="(itemComp, _index) in itemGroup.list" :key="_index">
                <router-link
                  class="el-link el-link--default is-underline"
                  :to="{ path: itemComp.router, query: { name: itemComp.title } }"
                  >{{ itemComp.title }}</router-link
                >
              </div>
            </div>
          </div>
        </el-aside>
      </el-scrollbar>
      <el-scrollbar height="100vh" always style="width: 100%">
        <el-main>
          <div class="cont_wrap">
            <router-view></router-view>
          </div>
        </el-main>
      </el-scrollbar>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import $ from 'jquery';
import { onBeforeMount } from "vue";
import { demoProps } from "@/stores/modules/merakDemo";
import { demoMenuList } from "./demoMenulist";
import { PORT1 } from "@/api/config/servicePort";
import http from "@/api";
 
const demoProp = demoProps();
// 响应式变量
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// axios
//   .post("http://localhost:8850/api/sys/tbl-set/save")
//   .then(function (res) {
//     console.log(res);
//   });

  // axios.post("http://localhost:8850/api/sys/menu/collect?id=13")
  // .then(function (res) {
  //   console.log(res);
  // });
  // axios.post(" http://localhost:8850/api/sys/menu/collect?id=134345")
  // .then(function (res) {
  //   console.log(res);
  // });
  // axios.post("https://sscn.tianxuan.work/sys/menu/collect?id=13&info=post_kuayu",{'info':"post 跨域"})
  // .then(function (res) {
  //   console.log(res);
  //   console.log("post 跨域");
  // });
  // axios.get("https://sscn.tianxuan.work/sys/menu/collect?id=13&info=get_kuayu")
  // .then(function (res) {
  //   console.log(res);
  //   console.log("get 跨域");
  // });

  // http.get('http://192.168.111.118:4400/getTest').then(res=>{
  //   console.log(res)
  //   console.log("DSfadsfa")
  // })
  // http.post('http://192.168.111.118:4400/postTest').then(res=>{
  //   console.log(res)
  //   console.log("DSfadsfa")
  // })
// let  verb='POST';
// let  params={erwerw:3243242};
//   const request = {
//   method: verb,
//   headers:{'Content-Type':'application/json'},
//   url: 'https://sscn.tianxuan.work/sys/menu/collect?id=13',
//   withCredentials: true      // ? are you sure you need this?
// }
// if (verb === 'GET' || verb === 'DELETE') {
//   request.params = params // query params, no request body
// } else {
//   /// set appropriate request content-type
//   request.headers = { 'content-type': 'application/x-www-form-urlencoded' }

//   // convert "params" object into request body string
//   request.data ={324:43242}
// }
// axios(request).then(function(res){
//  console.log(res)
// }) 

 
  $.ajax({
    url:"https://sscn.tianxuan.work/sys/menu/collect?id=13&r=jq_post",
    type:'post',
    data:{dd:43242342,id:13},
    success:function(res){
    console.log(res)
    }
  })
  $.ajax({
    url:"https://sscn.tianxuan.work/sys/menu/collect?id=1365&r=jq_get",
    type:'get', 
    data:{dd:"header set",id:1653},
    success:function(res){
    console.log(res)
    }
  })

//生命周期
onBeforeMount(() => {
  let oEl = document.querySelector("body");
  //(oEl as HTMLBodyElement).style.overflow = "hidden";
});
 
//生命周期

//监听方法
//滚动菜单回调
const scrollBarScroll = e => {
  return e;
};
const pullCode=()=>{
  http.post(PORT1 +'/git/pull', {file:'.'}, { cancel: false, loading: false });

}
//监听方法
</script>
<style lang="scss">
$Black: #000000;
$White: #fff;

$fs13: 13px;
$fsNormal: normal;
$fwBold: bold;

$meunTitleColor: $Black;

.show_link {
  height: 50px;
}
.merak2_help {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 97%;
  margin-bottom: 30px;
  padding: 15px 0px 0px;
  font-size: 26px;
  font-weight: bold;

  backdrop-filter: blur(2px);
}
.el-container {
  font-family: Inter, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, \5fae\8f6f\96c5\9ed1, Arial,
    sans-serif;
  width: 80%;
  margin: 0 auto;
}

.component_tree {
  padding: 70px 0px 20px 0px;

  .component_group {
    padding: 0px 20px;
    margin-bottom: 25px;

    .title {
      margin-bottom: 10px;
      font-weight: $fwBold;
      color: $meunTitleColor;
    }

    .list {
      .el-link {
        display: flex;
        justify-content: flex-start;
        padding: 6px 20px;
        font-size: $fs13;
        font-weight: $fsNormal;
      }
    }
  }
}

.el-main {
  padding: 0px 20px;

  .cont_wrap {
    padding: 20px 0px 180px;
  }
}

// 黑暗模式============================
.dark {
  .component_tree {
    padding: 20px 0px;

    .component_group {
      padding: 0px 20px;
      margin-bottom: 25px;

      .title {
        margin-bottom: 10px;
        font-weight: $fwBold;
        color: $White;
      }

      .list {
        .el-link {
          display: flex;
          justify-content: flex-start;
          padding: 6px 20px;
          font-size: $fs13;
          font-weight: $fsNormal;
        }
      }
    }
  }

  .el-main {
    padding: 0px 20px;

    .cont_wrap {
      padding: 20px 0px;
    }
  }
}

.title_lv2 {
  color: #7b7b7b;
}
.hr {
  width: 90%;
  height: 1px;
  margin: 30px auto;
}
.hr.das {
  border-top: 1px dashed #b0cdd2;
}
ol {
  padding-left: 30px;
}
</style>
